<template>
  <div>
    <el-button @click="$emit(`handle_back`)" style="margin-bottom: 20px">返回</el-button>
    <u-table ref="plxTable" class="tableBox" show-header-overflow="ellipsis" stripe size="mini" :span-method="spanMethod" v-loading="loading">
      <u-table-column v-for="item in columns" :key="item.id" align="center" show-overflow-tooltip :prop="item.prop" :label="item.label">
        <template v-slot="{ row }" v-if="item.slot">
          <span v-if="item.slot == 'monPercent'" class="inline">
            <i class="dot" :style="dotStyle(row[item.prop] )"></i> {{ row[item.prop] }}
          </span>
          <span v-if="item.slot == 'dayPercent'" class="inline">
            <i class="dot" :style="dotStyle(row[item.prop] )"></i> {{ row[item.prop] }}
          </span>
        </template>
        <template v-slot="{ row }" v-else>
          {{ row[item.prop] }}
        </template>
      </u-table-column>
    </u-table>
  </div>

</template>
<script>
import { $budgetAPI } from "@/api";
export default {
  props: {
    params: {
      type: Object,
      required: true,
    },
  },
  created() {
    // this.init();
    this.getList();
  },
  data() {
    return {
      loading: false,
      columns: [],
      spanArr: [],
    };
  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        let { content, code } = await this.fetch($budgetAPI.dayDrill, {
          areaId: this.params.areaId,
          acctMonth: this.params.acctMonth,
        });

        if (code == 0) {
          this.columns = content.key.map((i, idx) => {
            return {
              label: content.name[idx],
              prop: i,
              minWidth: "50px",
              slot:
                (i == "monPercent" && "monPercent") ||
                (i == "dayPercent" && "dayPercent") ||
                undefined,
            };
          });
          this.$refs.plxTable.reloadData(content.data);

          let contactDot = 0;
          let spanArr = [];
          content.data.forEach((item, index) => {
            if (index === 0) {
              spanArr.push(1);
            } else {
              if (item.areaName === content.data[index - 1].areaName) {
                spanArr[contactDot] += 1;
                spanArr.push(0);
              } else {
                contactDot = index;
                spanArr.push(1);
              }
            }
          });
          this.spanArr = spanArr;
        } else {
          this.$refs.plxTable.reloadData([]);
        }
      } finally {
        this.loading = false;
      }
    },
    dotStyle(value) {
      value = parseFloat(value);
      if (value >= 100) {
        return {
          background: "#7EC050",
        };
      } else if (value >= 60 && value < 100) {
        return {
          background: "#EBA246",
        };
      } else if (value >= 0 && value < 60) {
        return {
          background: "#FF0075",
        };
      } else if (value < 0) {
        return {
          background: "#FE0002",
        };
      }
    },
    spanMethod({ columnIndex, rowIndex }) {
      if (columnIndex === 0) {
        if (columnIndex === 0) {
          if (this.spanArr[rowIndex]) {
            return {
              rowspan: this.spanArr[rowIndex],
              colspan: 1,
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.inline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 30%;
}
.dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 50%;
  margin-right: 10px;
}
</style>